<template>
	<!-- 20230414 -->
	<view class="text-stepper-cn" @click.stop="">
		<!-- 页面内容 -->
		<view class="cn-content">
			<view class="flex align-center">
				<!-- 减号 -->
				<text class="tyIcon-symbol-minus" :class="value <= min || disabled ? 'text-cc' : 'text-1a'"
					:style="{'font-size':buttonSize + 'rpx'}" @click.stop="reduce"></text>
				<!-- 数字 -->
				<view class="margin-lr-20 radius-6">
					<input class="bg-f5 text-center text-30" :class="disabled ? 'text-cc' : 'text-1a'"
						:style="{'width':inputWidth + 'rpx','height':inputHeight + 'rpx','line-height':inputHeight + 'rpx'}"
						type="number" :disabled="disabledInput || disabled" @blur="inputBlur" :value="value" />
				</view>
				<!-- 加号 -->
				<text class="tyIcon-symbol-plus" :class="(max && value >= max) || disabled ? 'text-cc' : 'text-1a'"
					:style="{'font-size':buttonSize + 'rpx'}" @click.stop="add"></text>
			</view>
		</view>
		<!-- 页面浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	import common from '@/components/hzjc/utils/common.js'
	export default {
		props: {
			// 数字的初始值
			value: {
				type: [Number, String],
				default: 1
			},
			// 最小值
			min: {
				type: [Number, String],
				default: 1
			},
			// 最大值，为空时不限制
			max: {
				type: [Number, String],
				default: ''
			},
			// 步长，每次点击时改变的值
			step: {
				type: Number,
				default: 1
			},
			// 是否禁用步进器
			disabled: {
				type: Boolean,
				default: false
			},
			// 是否禁用输入框
			disabledInput: {
				type: Boolean,
				default: false
			},
			// 输入框宽度，默认单位为rpx
			inputWidth: {
				type: Number,
				default: 90
			},
			// 输入框高度，默认单位为rpx
			inputHeight: {
				type: Number,
				default: 50
			},
			// 按钮大小，默认单位为rpx
			buttonSize: {
				type: Number,
				default: 30
			},
			// 是否开启异步变更，开启后需要手动控制输入值
			asyncChange: {
				type: Boolean,
				default: false
			},
			// 多个步进器同时存在时，索引
			identifier: {
				type: [Number, String],
				default: ''
			}
		},

		watch: {
			max(newVal, oldVal) {
				if (this.value > newVal) {
					// 同步
					if (!this.asyncChange) {
						this.$emit("update:value", newVal)
					}
				}
			},
			min(newVal, oldVal) {
				if (this.value < newVal) {
					// 同步
					if (!this.asyncChange) {
						this.$emit("update:value", newVal)
					}
				}
			}
		},
		methods: {
			/**
			 * 点击加号
			 * @date 2023-02-14
			 */
			add() {
				if (this.disabled) {
					return false
				}
				// 同步
				if (!this.asyncChange) {
					let value = Number(this.value)
					let step = Number(this.step)
					if (this.max === '' || (value + step) <= this.max) {
						value += step
					} else {
						common.toast('数量超出范围~')
						return false
					}
					this.$emit("update:value", value)
					// 异步
				} else {

				}
				this.$emit('change', {
					type: 1,
					number: this.value,
					identifier: this.identifier
				})
			},

			/**
			 * 点击减号
			 * @date 2023-02-14
			 */
			reduce() {
				if (this.disabled) {
					return false
				}
				if (!this.asyncChange) { //同步
					let value = Number(this.value)
					let step = Number(this.step)
					if (this.min <= (value - step)) {
						value -= step
					} else {
						common.toast('数量不能再少了哦~')
						return false
					}
					this.$emit("update:value", value)
				}
				this.$emit('change', {
					type: 2,
					number: this.value,
					identifier: this.identifier
				})
			},

			/**
			 * 输入失去焦点
			 * @param {Object} e
			 * @date 2023-02-14
			 */
			inputBlur(e) {
				if (this.disabled) {
					return false
				}
				let value = e.detail.value

				// 同步
				if (!this.asyncChange) {
					if (!value) {
						return false
					}
					this.$emit("update:value", value)
					setTimeout(res => {
						if (this.max && value > this.max) {
							common.toast('数量超出范围~')
							value = this.max
						} else if (value < this.min) {
							common.toast('数量不能再少了哦~')
							value = this.min
						}
						this.$emit("update:value", value)
					}, 1)
					// 异步
				} else {

				}
				this.$emit('change', {
					type: 3,
					number: e.detail.value,
					identifier: this.identifier
				})
			}
		}
	}
</script>

<style scoped>

</style>